<template>
  <div>
    <el-table
      size="small"
      :data="adminList"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column align="center" type="index" width="60">
      </el-table-column>
      <el-table-column
        prop="adminName"
        label="管理员名称"
        width="120"
        show-overflow-tooltip
      >
      <el-table-column label="头像" prop="adminImg" align="center" width="100px">
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px; margin-bottom: -4px"
            :src= scope.row.adminImg
          >
          </el-image>
        </template>
      </el-table-column>
      </el-table-column>
      <el-table-column
        prop="adminTel"
        label="手机号"
        width="120"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="adminStatus"
        label="状态"
        width="120"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="scope.row.adminStatus == 1">冻结</span>
          <span v-if="scope.row.adminStatus == 0">正常</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="adminSex"
        label="性别"
        width="150"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="scope.row.adminSex == 1">男</span>
          <span v-if="scope.row.adminSex == 0">女</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="adminUpdateTime"
        label="修改时间"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="updateStatus(scope.row.adminId, 1)"
            >冻结</el-button
          >
          <el-button size="mini" @click="updateStatus(scope.row.adminId, 0)"
            >解冻</el-button
          >
          <el-button
            type="danger"
            size="mini"
            @click="assignRole(scope.row.adminId)"
            >分配角色</el-button
          >
          <el-button
            type="danger"
            size="mini"
            @click="manageRole()"
            >角色管理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- -------------------------给用户授权---------------------------- -->
    <el-dialog title="分配角色" :visible.sync="assingRolesVisible" width="30%">
      <el-checkbox-group v-model="checkRoles">
        <el-checkbox
          :label="item.id"
          v-for="(item, index) in roleList"
          :key="index"
          >{{ item.roleName }}</el-checkbox
        >
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="assingRolesVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      adminList: [],
      assingRolesVisible: false,
      roleList: [],
      checkRoles: [],
      adminId: "",
    };
  },
  methods: {
    manageRole(){
      this.$router.push({path: "/role"});
    },
    updateRole() {
      this.$axios
        .post("roles", {
          adminId: this.adminId,
          rids: this.checkRoles,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success("授权成功");
            this.assingRolesVisible = false;
            this.checkRoles = [];
            this.adminId = 0;
          }
        });
    },

    assignRole(adminId) {
      this.assingRolesVisible = true;
      this.$axios.get("/roles/" + adminId).then((res) => {
        if (res.data.code == 200) {
          this.roleList = res.data.data.roleList;
          this.checkRoles = res.data.data.checkRoles;
          this.adminId = adminId;
          console.log(this.roleList);
          console.log(this.checkRoles);
        } else {
          this.$message.error("出错了");
        }
      });
    },
    selAllAdmin() {
      this.$axios.post("/admin").then((res) => {
        this.adminList = res.data.data.adminList;
      });
    },
    updateStatus(id, status) {
      this.$axios
        .post("/admin/updateStatus", {
          adminId: id,
          adminStatus: status,
        })
        .then((res) => {
          if (res.data.code == 200) {
            if (status == 1) {
              this.$message.success("冻结成功");
            } else {
              this.$message.success("解冻成功");
            }
            this.selAllAdmin();
          }
        });
    },
  },
  mounted() {
    this.selAllAdmin();
  },
};
</script>